<template>
  <div class="fuzzy-user">
    <el-select
      size="mini"
      v-model="selcetData"
      filterable
      remote
      reserve-keyword
      default-first-option
      :remote-method="remoteMethod"
      :loading="loading"
      @change="changeItemId"
    >
      <el-option
        v-for="item in ItemListData"
        :key="item[cdata.apiOptions.valueName]"
        :label="item[cdata.apiOptions.valueName]"
        :value="item[cdata.apiOptions.valueName]"
        popper-class="popper-class"
      >
        <span style="float: left; font-size: 15px">{{ item[cdata.apiOptions.valueName] }}</span>
        <span style="float: right; color: #ccc; font-size: 12px">{{
          item[cdata.apiOptions.keyName]
        }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ItemListData: [],
      loading: false,
      selcetData: "",
      itemStyle: {
        height: "70px",
        display: "block",
      },
      // keyName:'',
      // valueName:''
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    cdata:{
      type: Object,
      default: ()=>{},
    }
  },
  created() {
    // this.selcetData = JSON.parse(JSON.stringify(this.value));
    // this.selcetData = this.value;
    console.log(this.cdata,78946555555);
    // let {keyName,valueName}=this.cdata.apiOptions
    // this.keyName=keyName
    // this.valueName=valueName
  },
  methods: {
    GetItemData(e) {
      this.selcetData = e;
      this.loading = true;
      this.cdata.api(Object.assign(
        {
        CurrentPage: 1,
        Keyword: e,
        PageSize: 10, 
      },
      this.cdata.apiOptions.params ?? {}
      )).then((res) => {
        this.ItemListData = res.Items;
        this.loading = false;
      });
    },
    //根据编号搜索
    remoteMethod(query) {
      this.GetItemData(query);
    },
    //修改物料id
    changeItemId(e) {
      this.ItemListData.some((item) => {
        if (e == this.cdata.apiOptions.valueName) {
          this.$emit("confirm", item);
        }
        return e == this.cdata.apiOptions.valueName;
      });
    },
  },
  watch: {
    selcetData: {
      handler(n, o) {
        this.$emit("input", n);
      },
    },
    value: {
      handler(n, o) {
        this.selcetData = n;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/jv_doc/style/mixin.scss";
</style>
